<template>
	<!-- 规格-模态层弹窗 -->
	<view class="popup spec" :class="specClass" @touchmove.stop.prevent="stopPrevent" @click="toggleSpec">
		<!-- 遮罩层 -->
		<view class="mask" @click.stop="hide"></view>
		<view class="layer attr-content" @click.stop="stopPrevent">
			<view class="popup-titel">{{params.type === 1 ?'请选择取消订单的原因':'退货申请'}}</view>
			<view v-if="params.item.ProductType === 2 && params.type === 2 && params.item.Type === 2">
				<view class="row b-b">
					<text class="tit">运输公司</text>
					<input class="input" type="text" v-model="LogisticsName"  placeholder="请输入物流公司" placeholder-class="placeholder" />
				</view>
				<view class="row b-b">
					<text class="tit">快递单号</text>
					<input class="input" type="text" v-model="LogisticsANO"  placeholder="请输入物流单号" placeholder-class="placeholder" />
				</view>
			</view>
			
			<view class="a-t">
				 <radio-group @change="radioChange" style="width: 100%">
					<!--<view class="popup-titel-sub">请选择取消订单的原因</view>-->
					<label class="uni-list-cell" v-for="(item, index) in items" :key="item.value">
						<view>{{item.name}}</view>
						<view v-if="item.value === '3' && value === Number(item.value)" class="other-reason">
							<input class="input" maxlength="20" type="text" v-model="otherReason"  placeholder="请输入其他原因" placeholder-class="other-reason-placeholder" />
						</view>
						<view class="radioList">
							<radio class="radioItem"  :value="item.value" :checked="index === current" />
						</view>
					</label>
				</radio-group>		
			</view>
			<view class="btn-wapper">
				<button class="btn cancel-btn" @click="handleCancel" :disabled="isShowOnClick">暂不取消</button>
				<button class="btn submit-btn" @click="handleSubmit" :disabled="isShowOnClick">确认取消</button>
			</view>
		</view>
	</view>
	<!-- 规格-模态层弹窗 end-->
</template>

<script>
	export default {
		name: 'cancelPopup',
		props: {
			goodsImg: {
				type:String,
				default: ''
			},
			isShowOnClick:{
				type:Boolean,
				default: false
			}
		},
		computed: {
		},
		data() {
			return {
				specClass: 'none',
				current:0,
				params: {
					item: {
						ProductType:0
					}
				},
				value:0,
				LogisticsName: '',
				LogisticsANO: '',
				items: [
					{
						name: '暂时不需要了',
						value: '0'
					},
					{
						name: '买多了',
						value: '1'
					},
					{
						name: '日期/规格/数量买错',
						value: '2'
					},
					{
						name: '其他原因',
						value: '3'
					}
				],
				otherReason:'',//其他原因
			};
		},
		onLoad() {
		},
		methods: {
			show(params) {
				console.log(params)
				this.LogisticsName = ''
				this.LogisticsANO = ''
				this.params = params
				this.specClass = 'show'
			},
			hide() {
				this.specClass = 'none'
			},
			// 商品数量改变
			change(value) {
				this.numberValue = value
			},
			radioChange(e) {
				this.value = e.detail.value*1
			},
			handleCancel() {
				this.hide()
				this.$emit('cancel')
			},
			handleSubmit() {
				if(this.params.item.ProductType === 2 && this.params.item.Type === 2) {
					if(!this.LogisticsName){
						this.$api.msg('请填物流名称');
						return;
					}
					if(!this.LogisticsANO){
						this.$api.msg('请填写物流单号');
						return;
					}
				}
				console.log('this.items[this.value].name',this.items[this.value].name)
				let title = this.items[this.value].name
				if(this.value === 3 && this.otherReason && this.otherReason.length>0){
					title = this.otherReason
				}
				this.$emit('ok',{
					title:title ,
					LogisticsName:this.LogisticsName,
					LogisticsANO:this.LogisticsANO,
					...this.params,
				})
			},
			stopPrevent(){},
		}
	}
</script>

<style lang="scss" scoped>
/*  弹出层 */
.popup {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 99;
	&.show {
		display: block;
		.mask{
			animation: showPopup 0.2s linear both;
		}
		.layer {
			animation: showLayer 0.2s linear both;
		}
	}
	&.hide {
		.mask{
			animation: hidePopup 0.2s linear both;
		}
		.layer {
			animation: hideLayer 0.2s linear both;
		}
	}
	&.none {
		display: none;
	}
	.mask{
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
		background-color: rgba(0, 0, 0, 0.4);
	}
	.b-b {
		display: flex;
		padding: 20rpx 40rpx;
		.input {
			text-align: right;
			flex: 1;
		}
	}
	
	.layer {
		position: fixed;
		box-sizing: border-box;
		z-index: 99;
		bottom: 0;
		width: 100%;
		border-radius: 10rpx 10rpx 0 0;
		background-color: #fff;
		.a-t {
			display: flex;
			width: 100%;
			@include  dashed;
			.right {
				padding: 0 20rpx;
				.info-item {
					font-size: $uni-font-size-base;
					line-height: $uni-font-size-lg+20rpx;
				}
				.price {
					font-size: $uni-font-size-lg;
					color: $base-color;
					font-weight: 600;
				}
				.symbol {
					font-size: $uni-font-size-sm - 10rpx;
				}
				.oldPrice {
					font-size: $uni-font-size-sm;
					padding-left: 10rpx;
					color: #999;
					text-decoration: line-through;
				}
			}
		}
		
		.other-reason{
			.other-reason-placeholder{
				font-size: 28rpx;
			}
		}
		.popup-titel {
			width: 100%;
			text-align: center;
			padding: 20rpx 0;
			font-size: $uni-font-size-lg;
			border-bottom: 1px dashed #f6f6f6;
		}
		
		.popup-titel-sub {
			padding: 0 40rpx;
			font-size: $uni-font-size-sm;
			color: #999;
		}
		
		.btn-wapper {
			display: flex;
		}
		
		.btn{
			flex: 1;
			background: $base-color;
			font-size: $font-base + 2rpx;
			border-radius: 0;
			color: #fff;
			&.again-btn {
				border-radius: 0;
				background: #ffbf1c;
			}
			&:after {
				border: none;
				border-radius: 0;
			}
		}
		
		.cancel-btn {
			background: #ccc;
		}
		
		.submit-btn {
			background:#498FFF;
		}
		
		.uni-list-cell {
			display: flex;
			padding: 40rpx;
			box-sizing: border-box;
			width: 100%;
			justify-content: space-between;
			border-bottom: 1px dashed #f6f6f6;
			font-size: $uni-font-size-base;
			/deep/ 
			.radioList{
				.radioItem{
					.uni-radio-wrapper{
						.uni-radio-input-checked{
							background-color: #eb8a3e!important;
							border: #eb8a3e 2rpx solid!important;
						}
					}
				}
			}
			
		}
	}
	@keyframes showPopup {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}
	@keyframes hidePopup {
		0% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}
	@keyframes showLayer {
		0% {
			transform: translateY(120%);
		}
		100% {
			transform: translateY(0%);
		}
	}
	@keyframes hideLayer {
		0% {
			transform: translateY(0);
		}
		100% {
			transform: translateY(120%);
		}
	}
}
</style>
